<template>
	<view class="">
		<view class="content">
			<video :src="videoUrl" @waiting="waiting" class="video-class" autoplay mobilenet-hint-type
				style="height: 1300rpx; width:800rpx;" loop :controls=false v-show="!this.showImg"></video>
			<image src="../../static/index/p1.jpg" style="height: 1300rpx;width: 800rpx;" mode="scaleToFill"
				v-show="this.showImg"></image>
			<image src="../../static/index/p2.png" style="height: 120rpx; width: 800rpx;" mode="top left"></image>
		</view>
		<view class="swiper-box">
			<uni-swiper-dot :info="bannerList" :current="current" :mode="mode" field="content">
				<swiper class="swiper-box" :autoplay="true" @change="change" :interval="3000" :duration="500">
					<swiper-item v-for="(item, index) in bannerList " :key="index" class="swiper-item">
						<view class="swiper-item">
							<image :src="item" mode="top left" style="width: 600px;"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class=" content">
			<image src="../../static/index/p3.png" style="height: 90rpx; width: 800rpx;" mode="top left">
			</image>
			<uni-section type="line" style="height: 90rpx;width: 800rpx;">
				<uni-search-bar placeholder="请输入您要搜索的项目名称" @focus="focus" @input="input" class="uni-mt-10" radius="5"
					clearButton="auto" cancelButton="none" @confirm="search">
					<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
				</uni-search-bar>
			</uni-section>
		</view>
		<view class="img-list" v-for="(item, index) in thumbnailList " :key="index">
			<image :src="item.url" @click="toDetail(item.realEstateProject)" mode="aspectFit"
				style="height:260px;width:390px;margin:0px;"></image>
		</view>

	</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				//videoUrl: "http://101.201.82.10:8001/file/%E8%A7%86%E9%A2%91/%E9%9B%86%E5%9B%A2%E8%A7%86%E9%A2%91.mp4",
				videoUrl: "https://www.f-cloud.top/web/file/%E8%A7%86%E9%A2%91/%E9%9B%86%E5%9B%A2%E8%A7%86%E9%A2%91.mp4",
				showImg: true,
				background: ['color1', 'color2', 'color3'],
				bannerList: [],
				thumbnailList: [],
				indicatorDots: true,
				thumbnail: {
					url: "",
					realEstateProject: ""
				},
				current: 0,
				mode: 'round',
				autoplay: true,
				interval: 2000,
				duration: 500,
				searchValue: '',
				companyId: 8
			}
		},
		onShow() {
			this.init();
		},
		onLoad() {

		},
		onHide() {
			this.thumbnailList = []
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			toDetail(id) {
				console.log(id);
				uni.navigateTo({
					url: "/pages/realEstateProduct/realEstateProduct" + "?id=" + id,
					success: (res) => {
						console.log('跳转成功.')
					}
				})
			},
			init() {
				this.bannerList = []
				//请求轮播图
				uni.request({
					url: this.baseUrl + `api/banner/${this.companyId}`, //仅为示例，并非真实接口地址。
					success: (res) => {
						console.log("res.data", res.data);
						for (var i = 0; i < res.data.length; i++) {
							var obj = res.data[i];
							var url = this.baseUrl + "file/图片/" + obj.bannerUrl
							this.bannerList.push(url);
						}

						this.text = 'request success';
					}
				});
				//请求项目缩略图列表
				uni.request({
					url: this.baseUrl + `api/thumbnail/getByCompanyId/${this.companyId}`, //仅为示例，并非真实接口地址。
					success: (res) => {
						console.log("res.data", res.data);
						for (var i = 0; i < res.data.length; i++) {
							var obj = {}
							obj.url = this.baseUrl + "file/图片/" + res.data[i].thumbnailUrl;
							obj.realEstateProject = res.data[i].realestateId;
							this.thumbnailList.push(obj);
						}
						this.text = 'request success';
					}
				});
			},
			click() {
				console.log("点击")
			},
			waiting() {
				this.showImg = true
				console.log("waiting~~~~~~~~~~~")
			},
			play() {
				this.showImg = false
				console.log("play~~~~~~~~~~~")
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
				console.log("获取焦点")
				console.log(e.value)
				console.log(e)
				uni.redirectTo({
					url: '/pages/search/search',
					// url: 'https://www.baidu.com',
					animationType: 'slide-in-bottom',
					animationDuration: 200
				})
			},

			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		},
	}
</script>

<style lang="scss">
	.swiper_img {
		height: 600rpx;
		width: 80%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;

		.swiper-box {
			//加宽度高度
			height: 600rpx;
			width: 600rpx;
		}

		.image {
			width: 100%;
			height: 600rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}


	.swiper-box {
		height: 400rpx;
	}


	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	.img-list {
		display: flex;
		flex-direction: column;
	}
</style>
